<template>
  <div id="container"></div>
</template>

<script>
import {init} from 'klinecharts'

export default {
  props: {
    timestamp: Number,
    url: String
  },
  data() {
    return {
      data: [],
      options: {
        grid: {
          show: true,
          horizontal: {
            show: true,
            size: 1,
            color: "#1F2126",
            style: "dashed",
            dashedValue: [2, 2],
          },
          vertical: {
            show: true,
            size: 1,
            color: "#1F2126",
            style: "dashed",
            dashedValue: [2, 2],
          },
        },
        // 蜡烛图
        candle: {
          // 蜡烛图类型 'candle_solid'|'candle_stroke'|'candle_up_stroke'|'candle_down_stroke'|'ohlc'|'area'
          type: "candle_solid",
          // 蜡烛柱
          bar: {
            upColor: "#F92855",
            downColor: "#00F0F0",
            noChangeColor: "#888888",
            upBorderColor: "#F92855",
            downBorderColor: "#00F0F0",
            noChangeBorderColor: "#888888",
            upWickColor: "#1F2126",
            downWickColor: "#00F0F0",
            noChangeWickColor: "#888888",
          },
          priceMark: {
            show: true,
            // 最高价标记
            high: {
              show: true,
              color: "#D9D9D9",
              textOffset: 5,
              textSize: 10,
              textFamily: "Helvetica Neue",
              textWeight: "normal",
            },
            // 最低价标记
            low: {
              show: true,
              color: "#D9D9D9",
              textOffset: 5,
              textSize: 10,
              textFamily: "Helvetica Neue",
              textWeight: "normal",
            },
            // 最新价标记
            last: {
              show: true,
              upColor: "#FF3C3C",
              downColor: "#00F0F0",
              noChangeColor: "#888888",
              line: {
                show: true,
                // 'solid' | 'dashed'
                style: "dashed",
                dashedValue: [4, 4],
                size: 1,
              },
              text: {
                show: true,
                // 'fill' | 'stroke' | 'stroke_fill'
                style: "fill",
                size: 12,
                paddingLeft: 4,
                paddingTop: 4,
                paddingRight: 4,
                paddingBottom: 4,
                // 'solid' | 'dashed'
                borderStyle: "solid",
                borderSize: 0,
                borderColor: "transparent",
                borderDashedValue: [2, 2],
                color: "#FFFFFF",
                family: "Helvetica Neue",
                weight: "normal",
                borderRadius: 2,
              },
            },
          },
          // 提示
          tooltip: {
            // 'always' | 'follow_cross' | 'none'
            showRule: "always",
            // 'standard' | 'rect'
            showType: "standard",
            // 自定义显示，可以是回调方法也可以是数组，当是一个方法时，需要返回一个数组
            // 数组的子项类型为 { title, value }
            // title和value可以是字符串或者对象，对象类型为 { text, color }
            // title 或者 title.text 可以是国际化的 key，
            // value 或者 value.text 支持字符串模版
            // 例如：想显示时间，开盘和收盘，配置[{ title: 'time', value: '{time}' }, { title: 'open', value: '{open}' }, { title: 'close', value: '{close}' }]
            custom: [
              // { title: '日期：', value: '{time}' },
              // { title: '', value: '' },
              // { title: '', value: '' },
              // { title: '', value: '' },
              {title: '情绪指数：', value: '{close}'},
              // { title: '', value: '' }
            ],
            defaultValue: "n/a",
            rect: {
              // 'fixed' | 'pointer'
              position: "fixed",
              paddingLeft: 0,
              paddingRight: 0,
              paddingTop: 0,
              paddingBottom: 6,
              offsetLeft: 10,
              offsetTop: 8,
              offsetRight: 10,
              offsetBottom: 8,
              borderRadius: 4,
              borderSize: 1,
              borderColor: "#f2f3f5",
              color: "#FEFEFE",
            },
            text: {
              size: 12,
              family: "Helvetica Neue",
              weight: "normal",
              color: "#D9D9D9",
              marginLeft: 10,
              marginTop: 8,
              marginRight: 6,
              marginBottom: 0,
            },
            icons: [],
          },
        },
        // 技术指标
        indicator: {
          ohlc: {
            upColor: "#FF3C3C",
            downColor: "#00F0F0",
            noChangeColor: "#888888",
          },
          bars: [
            {
              // 'fill' | 'stroke' | 'stroke_fill'
              style: "fill",
              // 'solid' | 'dashed'
              borderStyle: "solid",
              borderSize: 1,
              borderDashedValue: [2, 2],
              upColor: "#FF3C3C",
              downColor: "#00F0F0",
              noChangeColor: "#888888",
            },
          ],
          lines: [
            {
              // 'solid' | 'dashed'
              style: "solid",
              smooth: false,
              size: 1,
              dashedValue: [2, 2],
              color: "#FFFFFF",
            },
            {
              style: "solid",
              smooth: false,
              size: 1,
              dashedValue: [2, 2],
              color: "#EFDA02",
            },
            {
              style: "solid",
              smooth: false,
              size: 1,
              dashedValue: [2, 2],
              color: "#F001CC",
            },
          ],
          circles: [
            {
              // 'fill' | 'stroke' | 'stroke_fill'
              style: "fill",
              // 'solid' | 'dashed'
              borderStyle: "solid",
              borderSize: 1,
              borderDashedValue: [2, 2],
              upColor: "rgba(45, 192, 142, .7)",
              downColor: "rgba(249, 40, 85, .7)",
              noChangeColor: "#888888",
            },
          ],
          // 最新值标记
          lastValueMark: {
            show: false,
            text: {
              show: false,
              // 'fill' | 'stroke' | 'stroke_fill'
              style: "fill",
              color: "#FFFFFF",
              size: 12,
              family: "Helvetica Neue",
              weight: "normal",
              // 'solid' | 'dashed'
              borderStyle: "solid",
              borderSize: 1,
              borderDashedValue: [2, 2],
              paddingLeft: 4,
              paddingTop: 4,
              paddingRight: 4,
              paddingBottom: 4,
              borderRadius: 2,
            },
          },
          // 提示
          tooltip: {
            // 'always' | 'follow_cross' | 'none'
            showRule: "always",
            // 'standard' | 'rect'
            showType: "standard",
            showName: true,
            showParams: true,
            defaultValue: "n/a",
            text: {
              size: 12,
              family: "Helvetica Neue",
              weight: "normal",
              color: "#D9D9D9",
              marginTop: 8,
              marginRight: 10,
              marginBottom: 0,
              marginLeft: 6,
            },
            icons: [],
          },
        },
        // x轴
        xAxis: {
          show: true,
          size: "auto",
          // x轴线
          axisLine: {
            show: true,
            color: "#888888",
            size: 1,
          },
          // x轴分割文字
          tickText: {
            show: true,
            color: "#D9D9D9",
            family: "Helvetica Neue",
            weight: "normal",
            size: 12,
            marginStart: 4,
            marginEnd: 4,
          },
          // x轴分割线
          tickLine: {
            show: true,
            size: 1,
            length: 3,
            color: "#888888",
          },
        },
        // y轴
        yAxis: {
          show: true,
          size: "auto",
          // 'left' | 'right'
          position: "right",
          // 'normal' | 'percentage' | 'log'
          type: "normal",
          inside: false,
          reverse: false,
          // y轴线
          axisLine: {
            show: true,
            color: "#888888",
            size: 1,
          },
          // x轴分割文字
          tickText: {
            show: true,
            color: "#D9D9D9",
            family: "Helvetica Neue",
            weight: "normal",
            size: 12,
            marginStart: 4,
            marginEnd: 4,
          },
          // x轴分割线
          tickLine: {
            show: true,
            size: 1,
            length: 3,
            color: "#888888",
          },
        },
        // 覆盖物
        overlay: {
          point: {
            color: "#1677FF",
            borderColor: "rgba(22, 119, 255, 0.35)",
            borderSize: 1,
            radius: 5,
            activeColor: "#1677FF",
            activeBorderColor: "rgba(22, 119, 255, 0.35)",
            activeBorderSize: 3,
            activeRadius: 5,
          },
          line: {
            // 'solid' | 'dashed'
            style: "solid",
            smooth: false,
            color: "#1677FF",
            size: 1,
            dashedValue: [2, 2],
          },
          rect: {
            // 'fill' | 'stroke' | 'stroke_fill'
            style: "fill",
            color: "rgba(22, 119, 255, 0.25)",
            borderColor: "#1677FF",
            borderSize: 1,
            borderRadius: 0,
            // 'solid' | 'dashed'
            borderStyle: "solid",
            borderDashedValue: [2, 2],
          },
          polygon: {
            // 'fill' | 'stroke' | 'stroke_fill'
            style: "fill",
            color: "#1677FF",
            borderColor: "#1677FF",
            borderSize: 1,
            // 'solid' | 'dashed'
            borderStyle: "solid",
            borderDashedValue: [2, 2],
          },
          circle: {
            // 'fill' | 'stroke' | 'stroke_fill'
            style: "fill",
            color: "rgba(22, 119, 255, 0.25)",
            borderColor: "#1677FF",
            borderSize: 1,
            // 'solid' | 'dashed'
            borderStyle: "solid",
            borderDashedValue: [2, 2],
          },
          arc: {
            // 'solid' | 'dashed'
            style: "solid",
            color: "#1677FF",
            size: 1,
            dashedValue: [2, 2],
          },
          text: {
            // 'fill' | 'stroke' | 'stroke_fill'
            style: "fill",
            color: "#FFFFFF",
            size: 12,
            family: "Helvetica Neue",
            weight: "normal",
            // 'solid' | 'dashed'
            borderStyle: "solid",
            borderDashedValue: [2, 2],
            borderSize: 0,
            borderRadius: 2,
            borderColor: "#1677FF",
            paddingLeft: 0,
            paddingRight: 0,
            paddingTop: 0,
            paddingBottom: 0,
            backgroundColor: "transparent",
          },
          rectText: {
            // 'fill' | 'stroke' | 'stroke_fill'
            style: "fill",
            color: "#FFFFFF",
            size: 12,
            family: "Helvetica Neue",
            weight: "normal",
            // 'solid' | 'dashed'
            borderStyle: "solid",
            borderDashedValue: [2, 2],
            borderSize: 1,
            borderRadius: 2,
            borderColor: "#1677FF",
            paddingLeft: 4,
            paddingRight: 4,
            paddingTop: 4,
            paddingBottom: 4,
            backgroundColor: "#1677FF",
          },
        },
      },
      mainIndicators: [
        {
          type: 'main',
          checked: true,
          name: 'MA',
          sub: '移动平均线',
          params: [5, 10],
        }
      ],
      chart: null
    }
  },
  watch: {
    timestamp() {
      this.load()
    }
  },
  methods: {
    load() {
      this.$requests.post(this.url).then(resp => {
        let tempArray = []
        for (let i =0; i< resp.length; i++) {
          let temp = resp[i]
          if (temp.timestamp <= this.timestamp) {
            if (temp.value > 50) {
              tempArray.push({
                timestamp: temp.timestamp * 1e3,
                open: 50,
                close: temp.value,
                high: temp.value,
                low: 50
              })
            } else {
              tempArray.push({
                timestamp: temp.timestamp * 1e3,
                open: 50,
                close: temp.value,
                high: 50,
                low: temp.value
              })
            }
          }
        }
        this.onSet(tempArray)
      })
    },
    renderMainIndicator() {
      for (let index in this.mainIndicators) {
        let item = this.mainIndicators[index]
        this.chart.removeIndicator('candle_pane', item.name)
        if (item.checked) {
          this.chart.createIndicator({
            name: item.name,
            calcParams: item.params,
            styles: item.styles || {},
          }, true, {
            id: 'candle_pane',
            isStack: true
          })
        }
      }
    },
    onSet(klines) {
      this.chart.setStyles(this.options)
      this.renderMainIndicator()
      this.chart.applyNewData(klines)
    }
  },
  mounted() {
    this.chart = init('container')
    this.load()
  }
}
</script>

<style scoped>
#container {
  border-radius: 6px;
  background-color: #1F2126;
  height: 120px;
  width: 100%;
}
</style>
